<template>
    <div>
       <h1>新增食谱信息页面</h1>
    </div>

     <table class="table">
          <tbody>   
                   <tr>
                      <td>食谱标题</td>
                      <td>
                        <input type="text" v-model="data.helteName">
                      </td>
                   </tr>

                    <tr>
                      <td>食谱分类名称</td>
                      <td>
                        <select v-model="data.helteTypeId">
                             <option value="0">==请选择食谱分类==</option>
                             <option v-for="a in obj" :value="a.helteTypeId">{{a.helteTypeName}}</option>
                        </select>
                      </td>
                   </tr>

                    <tr>
                      <td>标签</td>
                      <td>
                        <textarea v-model="data.heltebQ"></textarea>
                      </td>
                   </tr>

                    <tr>
                      <td>分享</td>
                      <td>
                           <input type="text" v-model="data.helteNum">
                      </td>
                   </tr>

                    <tr>
                      <td>收藏</td>
                      <td>
                           <input type="text" v-model="data.helteSc">
                      </td>
                   </tr>

                    <tr>
                      <td>图片</td>
                      <td>
                    <input type="file" @change="tp">
                     <img style="width:45px;height:45px;" :src="axios.defaults.baseURL+data.helteImg">
                      </td>
                   </tr>

                    <tr>
                      <td>更新人</td>
                      <td>
                        <input type="text" v-model="data.name">
                      </td>
                   </tr>

    
                    <tr>
                      <td></td>
                      <td>
                          <input type="button" value="新增" class="btn btn-info" @click="add"> 
                      </td>
                   </tr>

          </tbody>
     </table>
</template>

<script setup lang="ts">
  import axios from 'axios';
   import {ref,onMounted} from 'vue';
    import {useRouter} from 'vue-router';
     const router=useRouter();

onMounted(()=>{
    helteTypes();
})
 
  const obj=ref({
     "helteTypeId": 0,
    "helteTypeName": ""
  })
   const helteTypes=()=>{
       axios.get("https://localhost:7048/api/HelteType/helteTypes").then(res=>{
           obj.value=res.data;

       })
   }


 const tp=(ed:any)=>{
      let f=ed.target.files[0];
       let fs=new FormData();
         fs.append("file",f);
           if(f.size>2*1024*1024){
           alert("文件不能大于2MB");
            return;
           }

//image/jpeg image/png
   if(f.type!="image/jpeg"&&f.type!="image/png"){
  alert("文件格式只能是image/jpeg和image/png");
            return;
   }


          axios.post("https://localhost:7048/api/Upload/up",fs).then(res=>{
              data.value.helteImg=res.data;

          })
 }


    const data=ref({
          "helteId": 0,
  "helteName": "",
  "helteTypeId": 0,
  "heltebQ": "",
  "helteNum": 0,
  "helteSc": 0,
  "helteImg": "string",
  "name": "",
  "helteDate": "2025-07-14T07:11:09.510Z",
  "state": true
    })

     const add=()=>{

         if(data.value.helteName==""){
         alert("食谱标题不能为空");
            return;
         }
      
         if(data.value.helteTypeId==0){
         alert("食谱分类名称不能为空");
            return;
         }

               
         if(data.value.heltebQ==""){
         alert("标签不能为空");
            return;
         }
               
         if(data.value.helteNum==0){
         alert("分享不能为空");
            return;
         }

               
         if(data.value.helteSc==0){
         alert("收藏不能为空");
            return;
         }
  if(data.value.name==""){
         alert("更新人不能为空");
            return;
         }


          axios.post("https://localhost:7048/api/Helte/AddAnync",data.value).then(res=>{
              if(res.data>0){
                 alert("新增成功");
                 router.push("/");

              }else{
                       alert("新增失败");
              }
          })
     }
</script>

<style scoped>

</style>
